body,p,h1,h2,h3,h4,h5,li,span,i,ul,img,a,strong{margin:0;padding:0; }
body{font-family:"microsoft yahei";font-size:14px; background:#fafafa}
li{list-style-type:none;float:left;}
a{text-decoration:none;outline:none;}
img{border:none;}
i{font-style:normal}
input,select,textarea{outline:none;padding-left:6px;}
textarea{resize:none;overflow-y:auto;}
div{margin:0 auto;}
.fl{float: left;}
.fc{float: left;}
.fr{float: right;}
body{background: #ededed;}
/*
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99f4f4f4,endColorstr=#99f4f4f4);

filter:alpha(opacity=50);

*/
.wid{width:1000px;height:100%;}
.top{width:100%;height:36px;border-bottom:solid 1px #eae6e2;}
.top .welcome{float: left;}
.top .welcome p{color: #858585; font-family: "宋休";font-size: 12px;line-height: 36px;}
.top .Collection{float: right;}
.top .Collection ul{}
.top .Collection ul li{margin-left: 20px;position:relative; cursor:pointer;line-height:36px;height:36px; display:table;}
.top .Collection ul li a{ vertical-align:middle; display:table-cell;} 
.top .Collection ul li:hover .codeimg{display:block;}
.top .Collection ul li .codeimg{width:100px; position:absolute;top:34px; left:-60px;display:none; z-index:1;}
.top .Collection ul li:nth-child(3):hover img:not(.codeimg){-webkit-transform:rotate(180deg);}
.top .Collection ul li img{margin-left:5px; margin-right: 5px;vertical-align: middle; margin-top: -2px; transition:.4s;}
/*.banner{width: 100%; height:421px; position: relative;}
.banner .bann{width: 100%;height: 100%;background:rgba(201,201,201,.23);}
.banner .bann ul{width: 100%;height: 100%;}
.banner .bann ul li{width: 100%;height: 100%;}
.banner .wid{ position: absolute; top: 0; left: 50%; margin-left: -498px;}
.banner .loging{width:330px;height: 384px;float: right; margin-top: 19px;background:rgba(24,25,27,0.08);}
.banner .loging .login_wrap{width:268px;}
.banner .loging .login_wrap p{font-size:12px; font-family:"宋体";margin-top:20px;width:100%;}
.banner .loging .login_wrap p.fl{margin-top:40px; margin-bottom:20px;}
.banner .loging .login_wrap p.fr{color:#23b7e5; text-align:right}
.banner .loging .login_wrap input[type="text"]{border:solid 1px #c6c6c6;background:#fff;border-radius:4px;height:39px;width:99%;margin-bottom:38px; font-family:"微软雅黑"; line-height:39px;}
.banner .loging .login_wrap input.submit{width:100%;height:46px;background:#23b7e5;color:#ffffff; font-family:"微软雅黑";font-size:24px; letter-spacing:4px; cursor:pointer; border:none;border-radius:4px;}
.banner .loging .login_wrap span{ font-family:"宋体";font-size:12px;display:block;margin-top:20px;float:left;width:100%; text-align:center}
.banner .loging .login_wrap span a{color:#454545; margin:0 24px;}
*/

* {
  font-family: "Microsoft YaHei";
  transition: all .3s;
  -webkit-transition: all .3s;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
}

.banner {
  perspective: 800px;
}

.bg {
  position: relative;
  width: 1000px;
  height: 370px;
  margin: 24px auto;
  background: url("http://7xj5si.com1.z0.glb.clouddn.com/o_1aqegldm243b14e8m3j1ofi185uo.png") center no-repeat;
  background-size:100% 100%;
  border-radius: 10px;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: rotateY(0deg) rotateX(0deg);
}
.img{
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 8px;
  left: 0;
  background: url("http://7xj5si.com1.z0.glb.clouddn.com/o_1aqeor79e1r8fk6r9u01alu18o0t.png") center no-repeat;
  background-size:95% 100%;
}
.text{
	position: absolute;
	top:98px;
	right:80px;
	font-size:30px;
	color:#fff;
	text-align:right;
	font-weight:lighter;
	width: 480px;
	height: 80px;
}
.copyright{
  position: absolute;
  bottom:10%;
  right:10%;
  font-size:10px;
  color:#fff;
  text-align:right;
  font-weight:lighter;
}
.a {
  -webkit-transform: translateZ(40px);
}
.b {
  -webkit-transform: translateZ(20px);
}
.c {
  -webkit-transform: translateZ(0px);
}

.menu{width:100%;height:86px;border-bottom:solid 1px #eae6e2;background: #fff;}
.menu .logo{float:left;margin-top:11px;}
.menu .list_menu{ float:right;}
.menu .list_menu ul{}
.menu .list_menu ul li{padding:0 26px; line-height:86px;font-size:18px; position:relative;}
.menu .list_menu ul li a{color:#000; transition:.4s;}
.menu .list_menu ul li a:hover{color:#f00;}
.menu .list_menu ul li.task:after{ content:"";position:absolute;width:21px;height:12px; background:url(img/ico0.jpg); top:24px;}
.menu .list_menu ul li.popularity:after{ content:"";position:absolute;width:34px;height:19px; background:url(img/ico1.jpg); top:18px;}


.weight{width:996px;margin-top:100px; display:table;}
.weight .img_pic{margin-top:65px;display:table; position:relative;width:585px;}
.weight .img_pic:after{ content:"";width:1px;height:100%;background:#cecece; position:absolute; left:50%;}
.weight .img_pic img{width:100px;}
.weight .top_title{ position:relative;text-align:center;}
.weight .top_title h2{font-size:32px;font-weight:normal;color:#3c3c3c;background:#fff; position:relative; z-index:1;width:540px; margin:0 auto;margin-top:40px;}
.weight .top_title p{width:467px;height:33px;border-radius:4px;background:#23b7e5;color:#ffffff; letter-spacing:8px;font-size:18px; line-height:33px; margin:0 auto;margin-top:5px;}
.weight .top_title strong{font-weight:normal;color:#3c3c3c;font-size:24px;margin-top:44px;display:inline-block;}
.weight .top_title i{ position:absolute;width:80%;height:1px;background:#000; left:10%; top:20px;}
.weight .left_con{width:431px; display:table;margin-left:30px;}
.weight .left_con ul li{font-size:20px;color:#3c3c3c;margin-top:20px; float:none;}
.weight .left_con ul li img{ margin-right:4px;}
.weight .text{width:92%;margin-top:60px;margin-top:60px;display:inline-block;border-bottom:solid 2px #a1a1a1; padding-bottom:75px;margin-left:40px;}
.weight .text h3{font-weight:normal;color:#3c3c3c;margin-top:20px;display:table;}
.weight .text h3 span{font-size:20px;}
.weight .text h3 p{font-size:18px;width:816px; line-height:28px;}
.weight .text a{height:72px;width:434px;background:#23b7e5;font-size:32px;display:block;text-align:center; line-height:72px;color:#ffffff;border-radius:4px; margin:0 auto;margin-top:60px;}

.bottom{width:800px;margin-top:60px; display:table;}
.bottom .text{}

.bottom .text p{font-size:18px;color:#3c3c3c;margin-top:10px;}
.bottom .fr p{ text-align:center;}

.code{width:1000px;background:#fff;text-align:center;display:table; padding-bottom:60px;}
.code .fl{margin-left:100px;}
.code .right_con{ float:right;width:285px;margin-top:60px; margin-right:100px;}
.code .right_con li{width:281px;height:51px;border:solid 2px #ff4e54;border-radius:20px;margin-top:20px;font-size:24px;color:#ff4e54; line-height:51px;}
.code .mar{margin-top:90px;}
.copy{height:60px;border-top:solid 1px #e7e7e7; text-align:center;}
.copy p{ line-height:60px;}
.width_limit{background:#fff;width:1000px;}


/* designer vs developer ------------------------*/
.clear:after{
  content: ".";
  clear:both;
  height: 0;
  font-size: 0;
  visibility: hidden;
}
.box{
  width:1000px;
  height:400px;
  border:1px solid #ccc;
  padding-top:66px;
  background: #fff;
  border-radius: 5px;
}
.dvd-1 h3{
  width:375px;
  height: 41px;
  background: url(images/index_03.png) no-repeat;
  text-indent: -9999px;
  margin:0 auto;
}
.dvd-1 ul{
  width:780px;
  margin:0 auto;
  margin-top:105px;
}
.dvd-1 ul li{
  float:left;
  display: inline-block;
  width:260px;
  height: 172px;
  text-indent: -9999px;
}
li.dvd-1-icon1{
  background: url(images/index_07.png) no-repeat center;
}
li.dvd-1-icon2{
  background: url(images/index_09.png) no-repeat center;
}
li.dvd-1-icon3{
  background: url(images/index_11.png) no-repeat center;
}

.dvd-2{
  border-top:0 none;
}
.dvd-2 h3{
  width:375px;
  height: 41px;
  background: url(images/index_17.png) no-repeat;
  text-indent: -9999px;
  margin:0 auto;
}
.dvd-2 ul{
  width:780px;
  margin:0 auto;
  margin-top:105px;
}
.dvd-2 ul li{
  float:left;
  display: inline-block;
  width:260px;
  height: 172px;
  text-indent: -9999px;
}
li.dvd-2-icon1{
  background: url(images/index_20.png) no-repeat center;
}
li.dvd-2-icon2{
  background: url(images/index_22.png) no-repeat center;
}
li.dvd-2-icon3{
  background: url(images/index_24.png) no-repeat center;
}

.dvd-3{
  border-top:0 none;
}
.dvd-3 h3{
  width:317px;
  height: 60px;
  background: url(images/index_29.png) no-repeat;
  text-indent: -9999px;
  margin:0 auto;
}

.dvd-3-link{
  border:2px solid #000;
  width:210px;
  height: 58px;
  margin:0 auto;
  margin-top:90px;
  text-align: center;
  position: relative;
}
.dvd-3-link a{
  display: block;
  width: 138px;
  height: 33px;
  margin:12px auto;
  overflow: hidden;
  text-indent: -9999px;
  background: url(images/index_33.png) no-repeat center 0;
}
.dvd-3-link a:hover{
  background: url(images/index_33.png) no-repeat 0 -33px;
}
@keyframes shake {
  50% {
    transform: translate(-5px, -5px); } 
  0%, 100% {
    transform: translate(0, 0); } 
}
.hand{
  display: block;
  background: url(images/index_37.png) no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  top:55px;
  left:200px;

  animation-name: shake;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.dvd-3 p{
  text-indent: -9999px;
  background: url(images/index_41.png) no-repeat center;
  width: 289px;
  height: 28px;
  margin:0 auto;
  margin-top:128px;
}

.dvd-4{
  border-top:0 none;
  padding-top:34px;
}
.dvd-4 h3{
  width:420px;
  height: 39px;
  background: url(images/index_45.png) no-repeat;
  text-indent: -9999px;
  margin:0 auto;
}
.dvd-4 ul{
  margin-top:50px;
}
.dvd-4 ul li{
  display: block;
  float: left;
  width:260px;
  height:290px;
  margin:0 33px;
}

.dvd-5{
  padding-top: 0;
  margin:0 auto;
  border-top:0;
  height:330px;
}
.dvd-5-left{
  border-right:1px solid #ccc;
  width:569px;
  float: left;
  height:265px;
  padding-top:65px;
}
.dvd-5-left p{
  text-indent: -9999px;
  background: url(images/index_49.png) no-repeat center;
  width:471px;
  height: 24px;
  margin:0 auto;
}
.dvd-5-bt{
  display: block;
  width:140px;
  height: 33px;
  text-indent: -9999px;
  margin:0 auto;
  margin-top:73px;
  background:url(images/index_57.png) no-repeat top;
}
a.dvd-5-bt:hover{
  background: url(images/index_57.png) no-repeat bottom;
}
.dvd-5-right{
  width:410px;
  height: 100%;
  float:right;
  height:330px;
  text-align: center;
}
.dvd-5-right p{
  height: 24px;
  margin:67px auto 30px auto;
  text-indent: -9999px;
  background: url(images/index_52.png) no-repeat center;
}
.dvd-5-right img{
  width:180px;
  height:180px;
  margin:0 auto;
}
.dvd-6{
  border-top:0 none;
  padding-top: 0;
  margin:0 auto;
  height:42px;
}
.dvd-6 p{
  text-align: center;
  font-size:14px;
  line-height: 42px;
  margin-bottom:60px;
}

.menu .list_menu ul li a.login, .menu .list_menu ul li a.register{
    display: block;
    position: relative;
    top: 27px;
    width:60px;
    height: 26px;
    background: #151515;
    background: linear-gradient(#181818,#131313);
    border: 1px solid #2E2E2E;
    border-radius: 4px;
    line-height: 26px;
    font-size: 12px;
    text-align: center;
    color: #FFF;
    opacity: .8;
    cursor: pointer;
}
.menu .list_menu ul li.log{
  padding: 0 5px 0 26px;
}
.menu .list_menu ul li.reg{
  padding: 0 15px 0 0;
}
